import React from "react";
import {
  Spin,
  Button,
  Space,
  Breadcrumb,
  Table,
  message,
  Popconfirm,
  Drawer,
} from "antd";
import {
  EyeFilled,
  EditFilled,
  DeleteFilled,
  PlusCircleOutlined,
} from "@ant-design/icons";
// import "./news.css";
import { Link,withRouter } from "react-router-dom";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
import {
  _newsList,
  _delNews,
} from "../../../../utils/news/index";
import moment from "moment";
import marked from "marked";

marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
});
class NewsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      newsList: null,
      visible: false,
      markdownContent: "",
      news_title: null,
      news_content: null,
      news_time: null,
    };
  }

  getData = () => {
    this.setState({ isLoading: true });
    _newsList()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
        //   console.log(res.data.data);
          this.setState({ isLoading: false });

          const newsList = res.data.data;
          console.log(newsList);
          for (let i = 0; i < newsList.length; i++) {
            newsList[i].key = newsList[i].news_id;

            newsList[i].news_title = newsList[i].news_title;
            newsList[i].control = newsList[i].news_id;
            newsList[i].news_time = moment(newsList[i].news_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          this.setState({ newsList: newsList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
  };

  deletSource = (val) => {
    _delNews(val)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          message.success("删除成功");
          this.getData();
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };

  viewHandle = (val) => {
    this.setState({
      visible: true,
      news_title: val.news_title,
      news_content: BraftEditor.createEditorState(val.news_content),
    });
  };

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };
  toAddPage = () => {
    //   console.log(this.props);
    this.props.history.push("/admin/n/a");
  };
  render() {
    const excludeControls = [
      "undo",
      "redo",
      "separator",
      "font-size",
      "line-height",
      "letter-spacing",
      "separator",
      "text-color",
      "bold",
      "italic",
      "underline",
      "strike-through",
      "separator",
      "superscript",
      "subscript",
      "remove-styles",
      "emoji",
      "separator",
      "text-indent",
      "text-align",
      "separator",
      "headings",
      "list-ul",
      "list-ol",
      "blockquote",
      "code",
      "separator",
      "link",
      "separator",
      "hr",
      "separator",
      "media",
      "separator",
      "clear",
      "fullscreen",
    ];

    const columns = [
      {
        title: "通告名称",
        dataIndex: "news_title",
      },
      {
        title: "发布时间",
        dataIndex: "news_time",
      },
      {
        title: "操作",
        dataIndex: "control",
        render: (text, record) => (
          <Space size="middle">
            <EyeFilled onClick={this.viewHandle.bind(this, record)} />
            <Drawer
              title={this.state.news_title}
              placement="left"
              closable={false}
              onClose={this.handleCancel}
              visible={this.state.visible}
              width="50vw"
            >
              <BraftEditor
                value={this.state.news_content}
                excludeControls={excludeControls}
                readOnly={true}
              />
            </Drawer>
            <Link to={{ pathname: "/admin/n/e", state: record }}>
              <EditFilled />
            </Link>
            <Popconfirm
              title="确认要删除吗？"
              okText="是"
              cancelText="否"
              onConfirm={this.deletSource.bind(this, text)}
            >
              <DeleteFilled style={{ color: "#7f8c8d" }} />
            </Popconfirm>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className="stu-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>
              <Link to="/admin/h">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>通告管理</Breadcrumb.Item>
          </Breadcrumb>
          <Button
            icon={<PlusCircleOutlined />}
            onClick={this.toAddPage}
            type="primary"
          >
            新增通告
          </Button>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Table
              columns={columns}
              dataSource={this.state.newsList}
              // rowSelection={rowSelection}
              pagination={{ pageSize: 6 }}
              // scroll={{ y: 300 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}

export default withRouter(NewsList);
